import { Layout } from "antd";

// import SiderBar from "@/components/SiderBar";
import React, { FC, useEffect, useState, createContext } from "react";
import { history, Link, useLocation, useSelector } from "umi";
import { Menu } from "antd";
import logo from "@/common/img/logo.svg";
const { Header, Sider, Content } = Layout;
import _Header from "@/components/_Header";
import IconMap from "@/components/IconMap";
import { cn } from "@/utils/twMerge";
import Loading from "@/components/Loading";

type PropsType = {
  children: React.ReactNode;
};

const routeList = JSON.parse(sessionStorage.getItem("routeList") || "[]");

export const CollapseContext = createContext<boolean | null>(null);

const BasicLayout: FC<PropsType> = ({ children }) => {
  const location = useLocation();
  const loading = useSelector((state: any) => state.loading);
  const [collapse, setCollapse] = useState(
    sessionStorage.getItem("collapse") === "true" ? true : false
  );

  if (location.pathname === "/") {
    const path = routeList[0].path;
    history.replace(path);
  }

  const list = routeList.map((r: any) => ({
    label: <Link to={r.path}>{r.name}</Link>,
    key: r.path,
    icon: IconMap[r.icon],
  }));

  return (
    <Layout className="h-screen w-full ">
      {/* <SiderBar
        Menu={Menu}
        Sider={Sider}
        collapse={collapse}
        routeList={routeList}
      ></SiderBar> */}
      <Sider width="256" theme="light" collapsed={collapse}>
        <div className="h-16 shadow-sm flex justify-center items-center gap-5 z-10 ">
          <img src={logo} alt="" className="w-10" />

          <p
            className={cn(
              "font-bold text-lg bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent text-nowrap ",
              collapse && "hidden"
            )}
          >
            OA系统
          </p>
        </div>
        {/* 菜单 */}
        <div className="h-[calc(100%_-_4rem)]   overflow-auto pt-7">
          <Menu
            selectedKeys={[location.pathname]}
            style={{ width: collapse ? 80 : 256 }}
            mode="inline"
            className="sider-menu"
            items={list}
          ></Menu>
        </div>
      </Sider>
      <Layout>
        <_Header
          Header={Header}
          collapse={collapse}
          setCollapse={setCollapse}
        ></_Header>

        <CollapseContext.Provider value={collapse}>
          <Content>
            <div className="relative p-3  w-full h-full overflow-auto">
              <Loading
                show={
                  loading.effects["dashboard/getDashboardData"] ||
                  loading.effects["attendance/getAttendanceData"]
                }
                className="absolute top-0 left-0 w-full h-screen z-20"
              />

              {children}
            </div>
          </Content>
        </CollapseContext.Provider>
      </Layout>
    </Layout>
  );
};

export default BasicLayout;
